<template>
  <div :class="getClass" :style="getStyle">
    <div class="rect-head flex items-center">
      <img :src="data.icon" class="w-3.75 h-3" />
      <span class="ml-2 text">{{ data.name }}</span>
    </div>
    <div class="rect-body pl-6">{{ data.value || 0 }}</div>
  </div>
</template>

<script lang="ts" setup name="RectCard">
  import { onMounted, computed } from 'vue';
  import type { CSSProperties } from 'vue';

  import { setStyle } from '/@/utils/cssUtil';
  import { ModuleConfig, ModuleValue } from './types';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { getImageUrl } from './util';

  const { prefixCls } = useDesign('RectCard');
  const props = withDefaults(
    defineProps<{
      config?: ModuleConfig;
      data?: ModuleValue;
    }>(),
    {
      config: () => ({
        className: '',
        height: 120,
        padding: [24, 0, 0, 68],
      }),
      data: () => ({
        value: '128',
        icon: getImageUrl('2'),
        name: '施工中数量',
      }),
    },
  );
  const getClass = computed(() => {
    const { className } = props.config;

    return [prefixCls, className];
  });
  const getStyle = computed((): CSSProperties => {
    return setStyle(props.config);
  });
  onMounted(() => {});
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-RectCard';

  .@{prefix-cls} {
    width: 25%;

    .text {
      color: @text-color-defined;
      font-weight: 600;
    }

    .rect-body {
      color: @text-color-bold;
      font-weight: 600;
      font-size: 36px;
      line-height: 36px;
    }
  }
</style>
